<template>
  <div>
    <div class="body" @click="showDetail">
      <el-image
        lazy
        class="video-img"
        @error="reLoadImg"
        :src="frameUrl"
        :style="`height:${frameImgHeight}px`"
      >
        <div slot="placeholder" class="image-slot">
          加载中<span class="dot">...</span>
        </div>
        <div slot="error" class="image-slot">文件已过期</div>
      </el-image>
      <i v-show="!visible" class="video-svg tico tico-video-play-white" />
    </div>
    <el-dialog
      :visible.sync="visible"
      :before-close="handleClose"
      :width="imgDialogWidth"
    >
      <div class="dialog-img">
        <video
          class="video"
          :src="getUrl"
          id="videoId"
          controls
          autoplay
          ref="videoRef"
        ></video>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Jindouyun from '../../../../utils/jindouyun'
const _jindouyun = new Jindouyun({
  userId: '1111435842045702146',
  header: {},
  token: ''
})
export default {
  props: ['info', 'id'],
  computed: {
    getUrl: function () {
      if (this.info.videoUrl) {
        return this.info.videoUrl
      } else {
        return _jindouyun.getDownloadUrl({ isPublic: false, fileId: this.info.sourceId })
      }
    },
    // frameUrl: function () {
    //   if (this.info.frameUrl) {
    //     return this.info.frameUrl
    //   } else {
    //     const data = JSON.parse(this.info.measureInfo)
    //     return data.frameUrl
    //   }
    // },
    // frameWidth: function () {
    //   if (this.info.width) {
    //     return this.info.width
    //   } else {
    //     const data = JSON.parse(this.info.measureInfo)
    //     return data.width
    //   }
    // },
    // frameHeight: function () {
    //   if (this.info.height) {
    //     return this.info.height
    //   } else {
    //     const data = JSON.parse(this.info.measureInfo)
    //     return data.height
    //   }
    // },
    frameImgHeight () {
      return this.info.height / (this.info.width / 140) || 200
    },
    imgDialogWidth: function () {
      let width
      if (this.frameWidth * 1 > 600) {
        width = 600 * 1
      } else if (this.frameWidth * 1 < 300) {
        width = 300
      } else {
        width = this.frameWidth * 1
      }
      return width + 45 + 'px'
    }
  },
  data () {
    return {
      visible: false,
      frameUrl: require('@/assets/picture/loading.gif'),
      hasReLoadImg: false
    }
  },
  created () {
    this.frameUrl = this.info.frameUrl || JSON.parse(this.info.measureInfo).frameUrl
  },
  methods: {
    showDetail () {
      this.visible = true
      if (this.$refs.videoRef) {
        this.$refs.videoRef.play()
      }
    },
    handleClose () {
      this.visible = false
      let myVideo = document.getElementById('videoId')
      myVideo.currentTime = 0
      myVideo.pause()
    },
    reLoadImg () {
      if (!this.hasReLoadImg) {
        setTimeout(() => {
          this.imgUrl += '#123'
          this.hasReLoadImg = true
        }, 600)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.image-slot {
  background: #f5f7fa;
  color: #c0c4cc;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.chat-cell {
  display: flex;
  align-items: flex-start;
  .dialog-img {
    display: flex;
    justify-content: center;
    align-items: center;
    video {
      max-width: 600px;
      max-height: 600px;
    }
  }

  .body {
    position: relative;
    cursor: pointer;
    .video-img {
      width: 140px;
    }
    .video-svg {
      position: absolute;
      font-size: 50px;
      left: calc(50% - 25px);
      top: calc(50% - 25px);
      font-weight: 500;
      color: white;
    }

    /deep/.el-image__inner {
      width: auto !important;
      border-radius: 10px;
    }
  }
}
</style>
